{% extends 'myhome/base.html' %}

    {% block title %}
    <title>bookshop-类别</title>
    {% endblock %}

    {% block con %}
    <!-- breadcrumbs-area-start -->
    <div class="breadcrumbs-area mb-70">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="breadcrumbs-menu">
                        <ul>
                            <li><a href="{% url 'myhome_index' %}">首页</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- breadcrumbs-area-end -->
    <!-- shop-main-area-start -->
    <div class="shop-main-area mb-70">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
                    <div class="shop-left">
                        <div class="section-title-5 mb-30">
                            <h2>所有分类</h2>
                        </div>
                        <div class="left-menu mb-30">
                            <ul>
                            {% for i in classify %}
                                <li>
                                    <a href="{% url 'myhome_category' i.id %}" style="vertical-align:inherit;{% if i.id == classifyobj.obj.id %} color:#f07c29;{%endif%}">
                                        {{ i.name }}
                                    </a>
                                </li>
                            {% endfor %}
                            </ul>
                        </div>
                        <div class="left-title mb-20">
                            <h4>畅销榜</h4>
                        </div>
                        <div class="random-area mb-30">
                            <div class="product-active-2 owl-carousel">
                                <div class="product-total-2">
                                {% for i in w_f.books_set.all %}
                                    <div class="single-most-product bd mb-18">
                                        <div class="most-product-img">
                                            <a href="{% url 'myhome_bookdetails' i.id %}">
                                                <img src="{{ i.bookimgs_set.first.img_url }}" alt="book" />
                                            </a>
                                        </div>
                                        <div class="most-product-content">
                                            <div class="product-rating">
                                                <ul>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                </ul>
                                            </div>
                                            <h4><a href="{% url 'myhome_bookdetails' i.id %}">{{ i.title }}</a></h4>
                                            <div class="product-price">
                                                <ul>
                                                    <li>￥{{ i.price }}</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                                </div>
                            </div>
                        </div>
                        <div class="banner-area mb-30">
                            <div class="banner-img-2">
                                <a href="#"><img src="/static/myhome/img/banner/31.jpg" alt="banner" /></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
                    <div class="category-image mb-30">
                        <a href="#"><img src="/static/myhome/img/banner/32.jpg" alt="banner" /></a>
                    </div>
                    <div class="section-title-5 mb-30">
                        <h2>{{ request.GET.keywords }}</h2>
                    </div>
                    <div class="toolbar mb-30">
                        <div class="shop-tab">
                            <div class="tab-3">
                                <ul>
                                    <li class="active">
                                        <a href="#th" data-toggle="tab">
                                            <i class="fa fa-th-large"></i>网格
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#list" data-toggle="tab">
                                            <i class="fa fa-bars"></i>列表
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- tab-area-start -->
                    <div class="tab-content">
                        <div class="tab-pane active" id="th">
                            <div class="row">
                            {% for i in data %}
                                <div class="col-lg-3 col-md-4 col-sm-6">
                                    <!-- single-product-start -->
                                    <div class="product-wrapper mb-40">
                                        <div class="product-img">
                                            <a href="{% url 'myhome_bookdetails' i.id %}">
                                                <img src="{{ i.bookimgs_set.first.img_url }}" alt="book" class="primary" />
                                            </a>
                                        </div>
                                        <div class="product-details text-center">
                                            <div class="product-rating">
                                                <ul>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                </ul>
                                            </div>
                                            <h4><a href="{% url 'myhome_bookdetails' i.id %}">{{ i.title }}</a></h4>
                                            <div class="product-price">
                                                <ul>
                                                    <li>￥{{ i.price }}元</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- single-product-end -->
                                </div>
                            {% endfor %}
                            </div>
                        </div>
                        <div class="tab-pane fade" id="list">
                            <!-- single-shop-start -->
                            {% for i in data %}
                            <div class="single-shop mb-30">
                                <div class="row">
                                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                                        <div class="product-wrapper-2">
                                            <div class="product-img">
                                                <a href="{% url 'myhome_bookdetails' i.id %}">
                                                    <img src="{{ i.bookimgs_set.first.img_url }}" style="width:150px;" alt="book" class="primary" />
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
                                        <div class="product-wrapper-content">
                                            <div class="product-details">
                                                <div class="product-rating">
                                                    <ul>
                                                        <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                        <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                        <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                        <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                        <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    </ul>
                                                </div>
                                                <h4><a href="{% url 'myhome_bookdetails' i.id %}">{{ i.title }}</a></h4>
                                                <div class="product-price">
                                                    <ul>
                                                        <li>￥{{ i.price }}</li>
                                                    </ul>
                                                </div>
                                                <p>{{ i.subhead }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}

                            <!-- single-shop-end -->
                        </div>
                    </div>
                    <!-- tab-area-end -->
                    <!-- pagination-area-start -->
                    <div class="pagination-area mt-50">
                        <div class="page-number">
                            <ul>
                                {% load pagetag %}
                                {% showpage classifyobj.googlist.paginator.num_pages request %}
                            </ul>
                        </div>
                    </div>
                    <!-- pagination-area-end -->
                </div>
            </div>
        </div>
    </div>
    <!-- shop-main-area-end -->
    {% endblock %}